<template>
  <q-btn text-color="grey-10">
    <!-- dropdown content -->
    <q-menu fit>
      <q-list link class="text-grey-8">
        <q-item v-for="(value, key) in order" :key="key"
                class="size-14 text-grey-9"
                :disabled="ordering === key"
                :class="{'bg-grey-3': ordering === key}"
                :to="getRoute({query: {ordering: key}})">{{ value }}</q-item>
      </q-list>
    </q-menu>
    <q-icon name="swap_vert"></q-icon>
    <span>{{ order[ordering] }}</span>
  </q-btn>
</template>

<script>
    export default {
      name: 'aOrder',
      props: {
        order: {
          type: Object,
          required: true
        },
        ordering: {
          type: String,
          required: true
        }
      },
      data () {
        return {
        }
      },
      computed: {
      },
      watch: {
      },
      methods: {
      }
    }
</script>

<style lang="stylus">
</style>
